import type { Component } from "vue";

import type { FormItemRule } from "element-plus";

import MerakControl from "./index.vue";

/**
 * 公共类型
 * @param field 字段键值
 * @param title 字段文本
 * @param tip 字段提示语
 * @param custom 是否自定义控件
 * @param required 是否必填
 * @param message 必填提示语
 * @param onlyView 前端控制仅展示文本不做控件输入
 * @param rules 前端填充字段验证规则 ps: 必填验证规则请使用外部属性 required 和 message
 * @param error 前端填充字段报错信息
 * @param defaultSelectedLabel 前端用于初始化选项尚未请求前选中的文本
 * @param queryOptions 前端配置加载选项的方法 仅当类型为拥有选项的控件时生效 ps: query 输入搜索的文本
 */
type CommonType = {
  field: string;
  title?: string;
  tip?: string;
  custom?: boolean | 1 | 0;
  required?: boolean | 1 | 0;
  message?: string;
  onlyView?: boolean | 1 | 0;
  rules?: FormItemRule[];
  error?: string;
  defaultSelectedLabel?: string;
  queryOptions?: (field: string, query?: string) => Promise<MerakControlOption[] | void>;
};

/**
 * Input 控件
 * @param native 原生类型 默认 text (text: 文字输入框  textarea: 文本域  number: 数字输入框)
 * @param placeholder 占位提示语
 * @param maxlength 最大输入长度
 * @param rows 文本域输入行数 仅 native 为 textarea 时有效 默认 3 行
 * @param prefix 前缀
 * @param suffix 后缀
 * @param readonly 是否只读
 * @param disabled 是否禁用
 * @param validValue 前端自定义校验值方法
 */
type InputType = {
  type: "input";
  native: "text" | "textarea" | "number";
  placeholder: string;
  maxlength: number;
  rows: number;
  prefix: string | Component;
  suffix: string | Component;
  readonly: boolean | 1 | 0;
  disabled: boolean | 1 | 0;
  validValue: (value: string) => Promise<string>;
};

/**
 * Select 控件
 * @param options 静态选项
 * @param placeholder 占位符提示语
 * @param multiple 是否多选
 * @param remote 选项是否从服务器远程异步加载
 * @param async 选项是否从服务器异步加载
 * @param disabled 是否禁用
 */
type SelectType = {
  type: "select";
  options: MerakControlOption[];
  placeholder: string;
  multiple: boolean | 1 | 0;
  remote: boolean | 1 | 0;
  async: boolean | 1 | 0;
  disabled: boolean | 1 | 0;
};

/**
 * Radio 控件
 * @param options 静态选项
 * @param disabled 是否禁用
 */
type RadioType = {
  type: "radio";
  options: MerakControlOption[];
  disabled: boolean | 1 | 0;
};

/**
 * Date 控件
 * @param range 是否为时间区间
 * @param placeholder 占位提示语
 * @param startPlaceholder 时间范围开始占位提示语 与 placeholder 互斥
 * @param endPlaceholder 时间范围结束占位提示语 与 placeholder 互斥
 * @param format 日期格式 默认 "YYYY-MM-DD" ps: 只作为数据库入参格式
 * @param readonly 是否只读
 * @param disabled 是否禁用
 */
type DateType = {
  type: "date";
  range: boolean | 1 | 0;
  placeholder: string;
  startPlaceholder: string;
  endPlaceholder: string;
  format: "YYYY-MM-DD" | "YYYY-MM";
  readonly: boolean | 1 | 0;
  disabled: boolean | 1 | 0;
  disabledDate: (date: Date) => boolean;
};

export type MerakControlOption = {
  label: string;
  value: string | number;
  disabled: boolean | 1 | 0;
  [x: string]: any;
};

export type MerakControlInstance = InstanceType<typeof MerakControl>;

export type MerakControlProps = CommonType & Partial<InputType | SelectType | RadioType | DateType>;

export default MerakControl;
